import React, { Key, useEffect, useState } from 'react'
import { Card, Col, Row, Tree, Tag, Pagination, Table, Button } from 'antd'
import { Navigate, useNavigate, useParams } from 'react-router-dom';
import { hosDepartmentDataRequest, hosScheduleRuleRequest, getDepartmentWorkDataRequest } from '@/api/hospital/hospitalList';
import { hosDepartmentListType, bookingScheduleListType, findScheduleListReturnType } from '@/api/hospital/model/hospitalListType';
import { click } from '@testing-library/user-event/dist/click';


export default function HosPitalSchedul() {
    const navigate = useNavigate()
    // 解构我们的params传过来的hoscode参数
    const { hoscode } = useParams()
    // 定义科室数据的State状态
    const [hosDepartment, setHosDepartment] = useState<hosDepartmentListType>([])
    // 定义时间排班规则当前页的State状态
    const [page, setPage] = useState(1)
    // 定义时间排班规则当前页数据条数的状态
    const [limit, setLimit] = useState(3)
    //  定义当前选中的科室的State状态
    // const [depcode, setDepcode] = useState("200040878")
    // //定义当前科室的排班规则总条数
    const [total, setTotal] = useState(0)
    // 设置科室排班规则的状态
    const [scheduleRule, setScheduleRule] = useState<bookingScheduleListType>([])
    // 定义当前选中的workDate时间的State状态
    // const [workDate, setWorkDate] = useState('2022-4-28')
    // 定义下方医院科室排班的数据详情状态
    const [sourchData, setSourchData] = useState<findScheduleListReturnType>([])

    //1.定义一个请求科室列表的函数
    const getDepartmentList = async () => {
        const result = await hosDepartmentDataRequest(hoscode as string)
        // console.log(result);
        // 将请求回来的科室数据进行设置,下面要在表格中添加,方便渲染
        setHosDepartment(result)
        return result;
    }
    // 2.定义一个请求科室排班的函数
    const hosScheduleRuleHandle = async (depcode: string) => {
        // 给我们定义的请求设置参数
        const result = await hosScheduleRuleRequest({
            page: page,
            limit: limit,
            hoscode: hoscode as string,
            depcode: depcode,
        })
        // console.log(result, 'ttttt');
        // 将请求回来的排班规则数据进行设置,记得要在页面中添加,方便渲染
        setScheduleRule(result.bookingScheduleList)
        // 将请求回来的数据总条数进行设置
        setTotal(result.total)
        // 将请求回来的数据中workData时间数据,设置给State状态,下方的科室具体排班时间详情中需要这个参数
        // setWorkDate(result.bookingScheduleList[0]?.workDate)
        return result;
    }
    // 3.定义一个请求排班详情的函数
    const getDepartmentWorkDataHandle = async (depCode:string,workDate:string) => {
        const result = await getDepartmentWorkDataRequest({
            hoscode: hoscode as string,
            depcode: depCode,
            workDate: workDate,
        })
        // console.log(result);
        setSourchData(result)
        // setSourceData
    }

    //初始化请求
    useEffect(() => {
        const getData = async () => {
            //1.请求科室列表 得到科室列表的数据
            const departmentList = await getDepartmentList()
            // //2.根据科室数据获取初始的科室信息(默认第一个)
            const initDepCode = (
                departmentList[0].children as hosDepartmentListType
              )[0].depcode;
            //3.把初始的科室信息传递给 请求排班列表的函数,得到排班列表
            const scheduleRule = await hosScheduleRuleHandle(initDepCode)
            //4.根据排班列表,得到初始的排班列表的时间(默认第一个)
            const initWordDate = scheduleRule.bookingScheduleList[0].workDate;
            //5.根据排班列表的初始时间 请求 详细信息
            await getDepartmentWorkDataHandle(initWordDate,initDepCode)
        }
        getData()
    }, [])


    // ①点击页码更新排班规则的事件函数(记得传参数,就是我们点击的那条数据)
    // 点击的那一条数据,就是我们要查看的那一条数据,这里的数据记得要在useEffect中添加架空
    // 当点击的时候状态改变,就会重新获取数据进行渲染
    const paginationChangeHandle = (page: number, limit: number) => {
        // hosScheduleRuleHandle()
    }
    // ②点击科室tree,实现数据跳转,重新渲染
    const clickDepartmentHandle = (depCodeArr: Key[]) => {
        // 点击科室之后,表单的onSelect事件,选取我们要的那个
        // setDepcode(depCodeArr[0] as string)
        // hosScheduleRuleHandle()
    }
    // ③点击排班日期时间,切换数据渲染
    const scheduleRuleHandle = (workDate: string) => {
        return () => {
            // setWorkDate(workDate)
            // getDepartmentWorkDataHandle()
        }
    }


    //table的columns数据结构
    const columns = [
        {
            title: "序号",
            render(_: any, __: any, index: number) {
                return index + 1;
            },
        },
        {
            title: "职称",
            dataIndex: "title",
        },
        {
            title: "号源时间",
            dataIndex: "workDate",
        },
        {
            title: "可预约数",
            dataIndex: "reservedNumber",
        },
        {
            title: "可用名额",
            dataIndex: "availableNumber",
        },
        {
            title: "挂号费用",
            dataIndex: "amount",
        },
        {
            title: "擅长技能",
            dataIndex: "skill",
        },
    ];

    return (
        <Card>
            <p>选择:北京协和医院/多发性硬化专科门诊/2022-04-08</p>
            {/* gutter,间隔 */}
            <Row gutter={25}>
                {/* 左边的tree模块 */}
                <Col span={5}>
                    <Tree
                        // 这里是antd的问题,要给已经设置的数据类型,再次断言一个空数组[]
                        treeData={hosDepartment as []}
                        // 设置数据展示,跟我们的自定义节点一一对应
                        fieldNames={{ title: "depname", key: "depcode" }}
                        // 设置默认展开效果
                        // expandedKeys={["a4e171f4cf9b6816acdfb9ae62c414d7"]}
                        style={{
                            border: "1px solid #000",
                            height: "480px",
                            overflow: "auto",
                        }}
                        onSelect={clickDepartmentHandle}
                    />
                </Col>
                {/* 右上的Col,日期模块 */}
                <Col span={19}>
                    <div style={{ marginBottom: "20px" }}>
                        {scheduleRule.map(item => {
                            return (
                                // 这里点击排班时间,
                                <Tag key={item.workDate} onClick={scheduleRuleHandle(item.workDate)} style={{ cursor: "pointer" }}>
                                    <p>{item.workDate}</p>
                                    <p>{item.availableNumber}/{item.reservedNumber}</p>
                                </Tag>
                            )
                        })}

                    </div>

                    {/* 右上的Pagination页码设置 */}
                    <Pagination
                        // 当前页的设置
                        current={page}
                        // 当前页的数据条数
                        pageSize={limit}
                        // 数据的总条数设置*****
                        total={total}
                        // 点击页码的事件函数
                        onChange={paginationChangeHandle}
                    />

                    {/* 右下的数据列表模块 */}
                    <Table
                        // 每一列的字段数据
                        columns={columns}
                        style={{ marginTop: "20px" }}
                        // 每一行的具体详情数据
                        dataSource={sourchData}
                        // 设置一个可代替key的值
                        rowKey={"id"}
                        // 边框设置
                        bordered
                        // 下方页码设置可以取消,不用显示
                        pagination={false}
                    ></Table>

                    <Button onClick={() => { navigate(-1) }} style={{ marginTop: '20px' }}>返回</Button>
                </Col>
            </Row>
        </Card>
    )
}
